<script setup>
import { ref, onMounted } from 'vue'
import { getDataApi } from '@/api';
import { Tag, Refresh, More } from '@icon-park/vue-next'

const props = defineProps({
    type: {
        type: String,
        default: ''
    }
})

const loading = ref(true)
const data = ref({})

const fnToPage = (url) => {
    window.open(url)
}

const fnGetList = async (refresh) => {
    loading.value = true
    const params = {}
    if (refresh) {
        params.timestamp = new Date().getTime()
    }
    data.value = await getDataApi(props.type, params)
    loading.value = false
}

const fnParseTime = (timestamp) => {
    if(!timestamp) {
        return 'loading...'
    }
    const now = new Date().getTime()
    const diff = Math.floor((now - timestamp) / (60 * 1000))
    if (diff <= 1) {
        return '刚刚更新'
    } else {
        return `${diff}分钟前`
    }
}

onMounted(() => {
    fnGetList()
})
</script>

<template>
    <n-card embedded class="t-card-container" hoverable header-style="padding: 16px; background-color: var(--n-border-color);"
        content-style="padding: 0 16px 16px 16px" footer-style="padding: 0 16px 16px 16px">
        <template #header>
            <n-skeleton v-if="loading" text width="40%" height="24px" />
            <div v-else class="t-card-header">
                <n-space align="center">
                    <n-icon size="16">
                        <tag :size="16" />
                    </n-icon>
                    <n-text>{{ data.title }}</n-text>
                </n-space>
                <n-text :depth="3" style="font-size: 14px;">热搜榜</n-text>
            </div>
        </template>
        <n-skeleton v-if="loading" text :repeat="6" height="24px" />
        <template v-else>
            <n-scrollbar style="max-height: 360px">
                <ul class="t-card-list">
                    <li class="t-card-item" v-for="(item, i) in data.list" :key="i" @click="fnToPage(item.url)">
                        <n-text class="num" :class="i < 3 ? 'red' : ''">{{ i + 1 }}</n-text>
                        <n-text class="text" :depth="2">{{ item.title }}</n-text>
                    </li>
                </ul>
            </n-scrollbar>
        </template>
        <template #footer>
            <div class="t-card-footer">
                <n-text :depth="3" style="font-size: 12px;">{{ fnParseTime(data.updateTime) }}</n-text>
                <n-space>
                    <n-button size="tiny" tertiary round @click="fnGetList('refresh')">
                        <template #icon>
                            <refresh />
                        </template>
                    </n-button>
                    <!-- <n-button size="tiny" tertiary round>
                        <template #icon>
                            <more />
                        </template>
                    </n-button> -->
                </n-space>
            </div>
        </template>
    </n-card>
</template>

<style lang="scss" scoped>
.t-card-container {
    border-radius: 8px;
    height: 468px;

    .t-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 0;
        font-size: 16px;
    }

    .t-card-item {
        display: flex;
        align-items: center;
        margin: 12px 0;
        font-size: 14px;
        cursor: pointer;

        .num {
            margin-right: 12px;
            width: 24px;
            height: 24px;
            font-size: 12px;
            line-height: 24px;
            text-align: center;
            border-radius: 8px;
            background-color: var(--n-border-color);

            &.red {
                color: #fff;
                background-color: #f3666e;
            }
        }

        .text {
            flex: 1;
        }
    }

    .t-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
}
</style>